<script lang="ts" setup>

import {useMessageStore} from "../../store/MessageStore.ts";
import type {PrivateMessageBody} from "../../network/types/PrivateMessage.ts";
import {onMounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {PriMsgRoute} from "../index.ts";
import UserEntrance from "../../components/entrance/UserEntrance.vue";
import DateTime from "../../components/common/DateTime.vue";
import MessageRoute from "../../components/routes/MessageRoute.vue";
import {PriMessageStatus} from "../../network/types/PriMessageStatus.ts";
import {scrollShortKeys, type ShortKey} from "../../utils/ShortKeys.ts";

const messageStore = useMessageStore()
const route = useRoute()
const router = useRouter()
const dateWidth = "180px"

const data = ref<PrivateMessageBody>()
const loading = ref<boolean>(false)

const rowClassName = (row: { rowIndex: number }): string => `item-bg-color${row.rowIndex % 2}`

const request = (force: boolean = false) => {
  loading.value = true
  const page = route.query.page ? Number(route.query.page) : 1

  messageStore.list(page, force).then(res => {
    console.log(res)
    data.value = res
    loading.value = false
  })
}

const changePage = (page: number) => router.push({query: {page}})

const refresh = () => request(true)

// 快捷键
const shortKeys: ShortKey[] = [
  {title: '刷新', keys: ['alt', 'r'], action: refresh},
  ...scrollShortKeys,
]

onMounted(() => request())

watch(route, (v) => {
  if (v.name === PriMsgRoute.LIST) request()
})

</script>
<template>
  <!--快捷键-->
  <div class="short-key-div">
    <template v-for="k in shortKeys">
      <span v-shortkey="k.keys" @shortkey="k.action">{{ k.title }}</span>
    </template>
  </div>
  <div v-loading="loading" class="route-root">
    <div>
      <el-button-group>
        <el-button type="primary" @click="refresh">刷新</el-button>
      </el-button-group>
    </div>
    <el-pagination v-if="data" :current-page="data.page" :page-size="data.size" :total="data.total"
                   layout="prev, pager, next,jumper, total"
                   @current-change="changePage"/>
    <div>
      <el-table v-if="data" :cell-class-name="rowClassName" :data="data.data"
                header-cell-class-name="item-bg-color1"
                stripe
      >
        <el-table-column label="#" width="50px">
          <template #default="scope">
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column label="回复" prop="postCount" width="75px"/>
        <el-table-column label="私信" prop="title">
          <template #default="{row}">
            <div>
              <!--私信链接-->
              <message-route :mid="row.id">{{ row.title }}</message-route>
              <!--   私信状态-->
              <el-tag v-if="row.status.includes(PriMessageStatus.MULTI)" type="primary">多人</el-tag>
              <el-tag v-if="row.status.includes(PriMessageStatus.UNREAD)" type="danger">未读</el-tag>
              <el-tag v-if="row.status.includes(PriMessageStatus.FROM_SYSTEM)" type="danger">系统</el-tag>
              <el-tag v-if="row.status.includes(PriMessageStatus.ANONYMOUS_MODE)" type="danger">匿名模式</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column :width="dateWidth" label="发布">
          <template #default="{row}">
            <div>
              <user-entrance v-if="row.fromUserId" :user-id="row.fromUserId" :username="row.fromUsername"/>
              <span v-else>系统账号</span>
            </div>
            <div>
              <date-time :time="row.timeCreated"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column :width="dateWidth" label="最后回复">
          <template #default="{row}">
            <div>
              <date-time :time="row.timeLastModified"/>
            </div>
            <div>
              <user-entrance v-if="row.lastReplyUid" :user-id="row.lastReplyUid" :username="row.lastReplyUsername"/>
              <span v-else>系统账号</span>
            </div>
          </template>
        </el-table-column>


      </el-table>
    </div>
  </div>
</template>

<style scoped>

</style>